<ix-page-header>
  <ix-search-input1 [value]="filterString" [disabled]="isLoading" (search)="onListFiltered($event)"></ix-search-input1>
  <mat-slide-toggle
    color="primary"
    [ixTest]="'show-all-' + helpTextKey"
    [checked]="showAllQuotas"
    [disabled]="isLoading"
    (change)="toggleDisplay()"
    >
    <label>{{ helpText[helpTextKey].title | translate }}</label>
  </mat-slide-toggle>
  <ng-container *ixRequiresRoles="requiredRoles">
    @if (invalidQuotas.length > 0) {
      <button
        color="primary"
        mat-button
        ixTest="remove-invalid-quotas"
        [disabled]="isLoading"
        (click)="removeInvalidQuotas()"
      >
        {{ 'Remove Invalid Quotas' | translate }}
      </button>
    }
  </ng-container>
  <button
    *ixRequiresRoles="requiredRoles"
    color="primary"
    class="add-button"
    mat-button
    ixTest="add-quota"
    [disabled]="isLoading"
    (click)="doAdd()"
  >
    {{ 'Add' | translate }}
  </button>
</ix-page-header>

<div class="table-container">
  <ix-table
    [ix-table-empty]="!isLoading && !(dataProvider.currentPageCount$ | async)"
    [emptyConfig]="emptyConfigService.defaultEmptyConfig(emptyType)"
  >
    <thead
      ix-table-head
      [columns]="columns"
      [dataProvider]="dataProvider"
    ></thead>
    <tbody
      ix-table-body
      [columns]="columns"
      [dataProvider]="dataProvider"
      [isLoading]="isLoading"
    ></tbody>
  </ix-table>
  <ix-table-pager [dataProvider]="dataProvider"></ix-table-pager>
</div>
